import {deepCopy, messages} from "share/common";
import React, { Component } from 'react';
import {Input, message, Form, Icon, Tag, Row, Col} from 'antd';
import errorMessage from 'share/errorMessage';
import ScanReceiveService from "./scan-receive.service";
import Condition from "components/condition";
import noDataImg from 'images/send-code/nothing.png';

const { If } = Condition;

class ScanReceiveInput extends Component {

  state = {
    loading: false,
    sendList: [],
    inputValue: ''
  };

  handlePressEnter = (e) => {
    let { sendList } = this.state;
    this.setState({ loading: true });
    ScanReceiveService.receive(e.target.value).then(res => {
      let formInfo = res.data.entityType === 5001 ? messages('expense-13.key55')/*发票袋*/ :
        messages('expense-13.key56')/*单据*/;
      formInfo = res.data.businessCode ? `${formInfo} ${res.data.businessCode}` : '';
      if(res.data.success){
        sendList.push(formInfo);
        message.success(`${formInfo} ${res.data.msg}`);
      } else {
        message.error(`${formInfo} ${res.data.msg}`);
      }
      this.setState({ loading: false, inputValue: '', sendList });
      this.receiveInput.focus();
    }).catch(err => {
      this.setState({ loading: false, inputValue: '' });
      this.receiveInput.focus();
      errorMessage(err.response);
    })
  };

  componentDidMount(){
    setTimeout(() => {
      this.receiveInput.focus();
    }, 500);
  }

  render() {
    const { sendList, loading, inputValue } = this.state;
    let senListReverse = deepCopy(sendList);
    return (
      <section className='scan-receive-input'>
        <Input
          value={inputValue}
          placeholder={messages('expense-13.key57')/*使用扫码枪/手动录入*/}
          onChange={e=> this.setState({inputValue: e.target.value})}
          onPressEnter={this.handlePressEnter}
          ref={input => this.receiveInput = input}
          className="input-search"
          disabled={loading}
        />
        <p className='scan-receive-input-tips'>
          {messages('expense-13.key58')/*若您扫码后提示单据不存在，请尝试：1. 输入法切换至英文环境后再扫码；2. 确认您的扫码枪已设置回车后缀*/}
        </p>
        <If value={loading}>
          <Icon type="loading" style={{position: 'absolute', top: 8, right: 8, zIndex: 1}}/>
        </If>
        <div className="send-area">
          <h3 className="send-title">{messages('expense-13.key59')/*已收到单据*/}</h3>
          <div className="send-result">
            <Row>
              {
                senListReverse[0]
                  ? senListReverse.reverse()
                    .map((item, index) => <Tag color="#F7F8FA" key={index} className='send-result-tag'>{item}</Tag>
                    )
                  : <div className="send-result-nothing">
                    <img className="send-result-icon" src={noDataImg} alt={'nothing'}/>
                    <span className="send-result-text"> {messages('expense-13.key60')/*暂无单据*/}</span>
                  </div>
              }
            </Row>
          </div>
        </div>
      </section>
    );
  }
}

ScanReceiveInput.propTypes = {};

export default ScanReceiveInput;
